<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/verify.css">
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    /*特种设备内容标志*/
    .content_header{
        width: 100%;
        height: 8vw;
        background-color:#277738 ;
        color: #FFF;
        text-align: center;
        font-size: 5vw;
        font-weight: bold;
        letter-spacing: 3vw;
    }


    /*电梯详情*/
    .content_info{
        width: 100%;
        height: 35vw;
        background-color: #fdffb6;
        border: 1vw solid #f6f6f6;
        border-left:none;
        border-right:none;
    }
    .text_box{
        padding: 0.8vw 1.5vw
    }
    .content_text{
        display: flex;
        justify-content: space-evenly;
        height: 4vw;
        font-size: 3vw;
        padding: 0.8vw 0;
    }
    .content_text span{
        color: #000;
        letter-spacing: 0.3vw;
    }
    .content_text div{
        display: flex;
        width: 50%;
    }
    .content_text div>div{
        width: border-box;
        border-bottom: 1px solid black;
    }
    /*救援码、电话*/
    .content_footer{
        display: flex;
        width: 100%;
        height: 22vw;
        background-color: #277738;
    }
    .phone_num{
        width: 40%;
    }
    .phone_num img{
        height: 14vw;
        position: absolute;
        top: 48vw;
        left: 2vw;
    }
    .device_num{
        width: 40%;
    }
    .num_box{
        display: flex;
        flex-direction: column;
        padding: 3vw;
    }
    .num_box span{
        margin-bottom: 2vw;
        font-size: 3vw;
        color: #FFFFFF;
    }
    .num_box div{
        height: 8vw;
        line-height: 8vw;
        width: 30vw;
        background-color: #FFFFFF;
        border-radius: 2vw;
        font-size:5vw;
        letter-spacing: 1vw;
        font-weight: bold;
        text-align: center;
    }
    .qrcode{
        width: 20%
    }
    .qrcode_box{
        margin: 1vw;
        width: 17vw;
        height: 17vw;
        background-color: #FFFFFF;
    }
    .qrcode span{
        color: #FFFFFF;
        font-size: 1vw;
        text-align: center;
    }
    /*信息列表公共*/

    .box{
        width: 90%;
        margin: auto;
        padding-top: 5vw;
        background-color: #FFF;
    }
    .title{
        height: 10vw;
        line-height: 10vw;
        background-color: #277738;
        color: #FFF;
        font-size: 4vw;
        text-indent: 3vw;
        border-radius: 10px 10px 0 0 ;
    }
    .info_text{
        display: flex;
        justify-content: space-between;
        height: 10vw;
        line-height: 10vw;
        background-color: #FFF;
        color: #808080;
        font-size: 3vw;
        padding:0 3vw;
        border-bottom: 0.05vw solid #808080;

    }
    /*投诉建议表单*/
    .form_content{
        padding: 0 3vw;
    }
    .form_item{
        display: flex;
        height: 10vw;
        width: 100%;
        line-height: 10vw;
        font-size: 3vw;
        padding: 2vw 0;
    }
    .form_label{
        color: #808080;
    }
    .form_input{
        display: inline-block;
        height: 10vw;
        width: 50vw;
        padding: 0 3vw;
        line-height: 10vw;
    }
    .form_input label{
        display: inline-block;
    }
    .form_input input[type="radio"]{
        display: inline-block;
        height: 5vw;
        width: 10vw;
        padding: 3vw 0;
        line-height: 10vw;
        font-size: 3vw;
        vertical-align: middle;
    }
    .form_input input[type="text"]{
        font-size: 3vw;
        display: flex;
        height: 10vw;
        width: 72vw;
        border: 0.05vw solid;
        text-indent: 2vw;
    }
    .form_textarea textarea{
        font-size: 3vw;
        width: 60vw;
        height: 40vw;
        border: 0.05vw solid;
        text-indent: 2vw;
    }
    .form_textarea button{
        width: 90%;
        height: 8vw;
        margin: 10vw auto 10vw auto;
        background-color: #277738;
        font-size: 3vw;
        color: #f6f6f6;

    }

</style>
<body>
<div>
    <div class="MarkBoard_content">
        <!--特种设备标志-->
        <div class="content_header">
            特种设备使用标志
        </div>
        <!--电梯详情-->
        <div class="content_info">
            <div class="text_box">
                <div class="content_text">
                    <div>
                        <span>设备种类：</span>
                        <div></div>
                    </div>
                    <div>
                        <span>设备品种：</span>
                        <div></div>
                    </div>
                </div>
                <div class="content_text">
                    <div style="width: 100%">
                        <span>使用单位：</span>
                        <div></div>
                    </div>
                </div>
                <div class="content_text">
                    <div>
                        <span>单位内编号：</span>
                        <div></div>
                    </div>
                    <div>
                        <span>设备代码：</span>
                        <div></div>
                    </div>
                </div>
                <div class="content_text">
                    <div>
                        <span>登记机关：</span>
                        <div></div>
                    </div>
                    <div>
                        <span>检验机构：</span>
                        <div></div>
                    </div>
                </div>
                <div class="content_text">
                    <div>
                        <span>登记证编码：</span>
                        <div></div>
                    </div>
                    <div>
                        <span>下次检验日期：</span>
                        <div></div>
                    </div>
                </div>
                <div class="content_text">
                    <div>
                        <span>维保单位：</span>
                        <div></div>
                    </div>
                    <div>
                        <span>应急救援电话：</span>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
        <!--救援电话、二维码-->
        <div class="content_footer">
            <div class="phone_num">
                <img src="96933.png" alt="">
            </div>
            <div class="device_num">
                <div class="num_box">
                    <span>设备编码</span>
                    <div>290127</div>
                </div>
            </div>
            <div class="qrcode">
                <div style="display: flex;flex-direction: column">
                    <div class="qrcode_box"></div>
                    <span>扫一扫查看电梯详情</span>
                </div>
            </div>
        </div>
    </div>
    <div class="info_box" style="background-color: #f6f6f6;padding-bottom: 10vw">
        <!--电梯详情-->
        <div class="elevator_info">
            <div class="box">
                <div class="title">电梯信息</div>
                <div class="info_text"><span>使用状态</span><span>在用</span></div>
                <div class="info_text"><span>使用场所</span><span></span></div>
                <div class="info_text"><span>设备所在区域</span><span></span></div>
                <div class="info_text"><span>小区/大厦</span><span></span></div>
                <div class="info_text"><span>使用单位负责人</span><span></span></div>
                <div class="info_text"><span>负责人电话</span><span></span></div>
                <div class="info_text"><span>电梯安全管理员</span><span></span></div>
                <div class="info_text"><span>安全管理员电话</span><span></span></div>
            </div>
        </div>
        <!--维保详情-->
        <div class="maintenance_info">
            <div class="box">
                <div class="title">维保信息</div>
                <div class="info_text"><span>维保人员姓名</span><span></span></div>
                <div class="info_text"><span>维保人员电话</span><span></span></div>
                <div class="info_text"><span>维保人员姓名</span><span></span></div>
                <div class="info_text"><span>维保人员电话</span><span></span></div>
            </div>
        </div>
        <!--年检信息-->
        <div class="checkout_info">
            <div class="box">
                <div class="title">年检信息</div>
                <div class="info_text"><span>上次检验时间</span><span></span></div>
                <div class="info_text"><span>上次检验结果</span><span></span></div>
                <div class="info_text"><span>下次检验时间</span><span></span></div>
            </div>
        </div>
        <!--保险信息-->
        <div class="insure_info">
            <div class="box">
                <div class="title">保险信息</div>
                <div class="info_text"><span>是否投保</span><span></span></div>
                <div class="info_text"><span>保险有效期</span><span></span></div>
            </div>
        </div>
        <!--按需维保-->
        <div class="submit_maintenance">
            <div class="box">
                <div class="title">按需维保</div>
                <div class="info_text"><span>是否按需维保</span><span></span></div>
            </div>
        </div>
        <!--投诉建议-->
        <div class="suggests">
            <div class="box" style="display:flex;flex-direction:column">
                <div class="title">投诉建议</div>
                <div class="form_content">
                    <div class="form_item">
                        <label class="form_label">类型：</label>
                        <div class="form_input">
                            <label>投诉：<input type="radio" name="complaint" value="投诉" title="投诉"></label>
                            <label>建议：<input type="radio" name="suggest" value="建议" title="建议" checked></label>
                        </div>
                    </div>
                    <div class="form_item">
                        <label class="form_label">姓名：</label>
                        <div class="form_input">
                            <label>
                                <input type="text">
                            </label>
                        </div>
                    </div>
                    <div class="form_item">
                        <label class="form_label">电话：</label>
                        <div class="form_input">
                            <label>
                                <input type="text">
                            </label>
                        </div>
                    </div>
                    <div class="form_item">
                        <label class="form_label">邮箱：</label>
                        <div class="form_input">
                            <label>
                                <input type="text">
                            </label>
                        </div>
                    </div>
                    <div class="form_item" style="height: auto">
                        <label class="form_label">投诉/建议：</label>
                        <div class="form_textarea">
                            <label>
                                <textarea></textarea>
                            </label>
                            <button type="button" class="submit">提交</button>
                        </div>

                    </div>
                </div>
                <div id="check" style="display: none;position: absolute;margin-top: 75vw;margin-left: 29vw;">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js" ></script>
<script>
$('.submit').click(function () {
    $('#check').css('display','block')
})

$('#check').pointsVerify({
    defaultNum : 5,	//默认的文字数量
    checkNum : 4,	//校对的文字数量
    vSpace : 4,	//间隔
    imgName : ['1.jpg', '2.jpg'],
    imgSize : {
        width: '400',
        height: '300',
    },
    barSize : {
        width : '400',
        height : '50px',
    },
    ready : function() {
    },
    success : function() {
        /*ajax提交数据*/
        $.ajax({
            url:'',
            type:'POST',
            success:function () {
                $('#check').css('display','none')
                /*弹出成功提示*/
            }
        })
        alert('验证成功，添加你自己的代码！');

    },
    error : function() {
//		        	alert('验证失败！');
    }

});
</script>
</html>